<template>
  <view class="index">
    <!-- 首页图 -->
    <view class="head">
      <view
        class="head_logo"
        style=""
      ></view>
    </view>
    <view class="contents">
      <!-- 个人信息 -->
        <view class="PersonalInfo radius">
          <!-- <view class="info_left">
            <view class="info_name">王兰兰</view>
            <view class="info_mark"><text>已认证</text></view>
          </view>
          <view class="info_center">
            <view class="info_code">学号： 123456789</view>
            <view class="info_yuanxi">院系： 城市规划</view>
            <view class="info_class">班级： 研1</view>
          </view>
          <view class="info_right">
            <nut-icon
              name="right"
              color="#dddddd"
            ></nut-icon>
          </view> -->
          <nut-row :gutter="10">
            <nut-col :span="8">
              <view class="info_left">
                <view class="info_name">{{userInfo.name}}</view>
                <view class="info_mark"><text>已认证</text></view>
              </view>
            </nut-col>
            <nut-col :span="8">
              <view class="info_center">
                <view class="info_code">学号： {{userInfo.code}}</view>
                <view class="info_yuanxi">院系： {{userInfo['department_id.name']}}</view>
                <view class="info_class">班级： {{userInfo['class']}}</view>
              </view>
            </nut-col>
            <nut-col :span="8">
              <view class="info_right" @tap="clickLiYuan">
                <nut-icon
                  class="info_icon"
                  name="right"
                  color="#dddddd"
                  size="12"
                ></nut-icon>
              </view>
            </nut-col>
          </nut-row>   
        </view>
      <!-- 通知栏 -->
      <view class="Notification_box">
        <image
          style="width: 38rpx;height: 50rpx;"
          src="../../static/index/tixing.png"
        />
        <nut-noticebar
          class="Notification"
          text="你有离院事务尚未办理，请尽快处理！"
          :scrollable="true"
          background="#f2f2f2"
          :color="`#D9500B`"
        >
        </nut-noticebar>
      </view>
      <!-- 办理状态 -->
      <view class="state radius">
        <view
          class="state_box1"
          @tap="isHandle"
        >
          <view
            class="p1"
            style="color:green;fontWeight:600rpx;"
          >{{bandleData.ybl}}</view>
          <view class="p2">已办理</view>
        </view>
        <view
          class="state_box1"
          @tap="unHandle"
        >
          <view
            class="p1"
            style="color:#1989fa;fontWeight:600rpx;"
          >{{bandleData.wbl}}</view>
          <view class="p2">未办理</view>
        </view>
        <view
          class="state_box1"
          @tap="allState"
        >
          <view class="p1"><text style="fontWeight:600rpx;">{{bandleData.zjd}}</text>%</view>
          <div class="p2">办理进度</div>
        </view>
      </view>
      <!-- grid九宫格 -->
      <!-- <nut-grid class="radius">
        <nut-grid-item
          class="radius"
          v-for="item in gridData"
          :key="item.id"
          :icon="item.img"
          :text="item.text"
          :border="false"
          :square="false"
          icon-size="80rpx"
          @tap="gridBtn(item)"
        ></nut-grid-item>
      </nut-grid> -->
      <view class="liyuan_box radius">
        <!-- <view class="liyuan_title">离院办理</view> -->
          <view class="liyuan_card">
            <nut-row v-for="(item, index) in gridData" :key="item.id">
              <nut-col :span="24">
                <view class="flex-content">
                  <!-- 虚线 -->
                  <view class="xuxian" v-if="index !=0 "></view>
                  <view class="card" @tap="gridBtn(item)">
                    <nut-card
                      :img-url="item.img"
                      :title="item.text"
                      :shopName="item.text2"
                      :is-need-price="false"
                      >
                    </nut-card>
                    <view class="info_icon">
                      <nut-icon
                        name="right"
                        color="#dddddd"
                        size="12"
                      ></nut-icon>
                    </view>
                  </view>
                  
                </view>
              </nut-col>
            </nut-row>
          </view>
      </view>

      <!-- 重要通知 -->
      <!-- <view class="title_Notice">重要通知</view> -->
      <!-- 校园资讯 -->
      <view class="school_message radius">
        <view class="message_title">
          <view class="p1">重要</view>
          <text class="p2 p22">通知</text>
        </view>
        <view class="message_txt">
          <view
            class="btn"
            v-for="item in schoolData"
            :key="item.sequence"
            @tap="clickMessage(item)"
          >
            <text class="d">•</text><text class="t">{{item.name?item.name:'暂无数据'}}</text>
          </view>
          <!-- 更多 -->
          <view
            class="more"
            @tap="clickMore"
            v-show="false"
          >更多</view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import './index.less'
import Taro, { useRouter, getCurrentInstance } from '@tarojs/taro'
import ImgURL from "../../services/img.url.js"

export default {
  components: {
  },
  data() {
    return {
      userInfo: '',//个人信息
      bandleData: {},//办理数据
      swiperData: [], //轮播图xuefeijiaona1
      schoolData: [], //校园资讯
      zuidashu: {},
      gridData: [
        { id: 1, oid: 21, text: "离院申请",text2: "离院申请信息填写", img: require('../../static/index/xinxitianbao.png'), url: '/pages/myForm/liyuanshenqing?id=21' },
        { id: 2, oid: 22, text: "离院指南",text2: "离院业务办理指引与说明", img:require('../../static/index/baodaozhinan.png'), url: '/pages/activity/guide/guide' },
        { id: 3, oid: 23, text: "办理事项",text2: "展示个人的离院环节办理情况", img: require('../../static/index/banlishixiang.png'), url: "/pages/myForm/liyuanliucheng?id=23" },
        { id: 4, oid: 24, text: "问卷调查",text2: "学院毕业生相关问卷调查", img: require('../../static/index/index-xinxitibao.png'), url: "/pages/myForm/wenjuandiaocha?id=true" },
        // { id: 5, oid: 25, text: "报到指南", img: ImgURL.indexBaodaozhinan, url: '/pages/activity/guide/guide' },
        // { id: 6, oid: 26, text: "入学教育", img: ImgURL.indexRuxuejiaoyu, url: '/pages/activity/schedule/index' },
        // { id: 7, oid: 27, text: "校园指南", img: ImgURL.indexIndexXiaoyuanzhinan, url: 'https://www.sigs.tsinghua.edu.cn/welcome/mainm.htm' },
        // { id: 8, oid: 28, text: "报到小助手", img: ImgURL.indexBaodaoxiaozhusho, url: "https://sigsyingxin.kf5.com/kchat/1041078#/chatbox?robot=1&t=1657793397433" },
      ],
    }
  },
  mounted() {
    this.userInfo = Taro.getStorageSync("userInfo");
    console.log(this.userInfo,'学生信息');
  },
  onShow(options) {
    console.log("Index onShow");
    const type = Taro.getStorageSync('type')
    if (type == "teacher") {
      Taro.reLaunch({ url: '/pages/index/teacherIndex' })
    }

    this.getHandle();
    this.getSchool();
  },
  methods: {
    getImgUrl(url) {
      return this.$mConfig.assetsPath + url;
    },
    // 点击个人信息
    clickLiYuan() {
      console.log(1111);
      Taro.navigateTo({
        url: "/pages/myForm/liyuanjilu",
      });
      console.log(1111);

    },
    //我的办理点击
    isHandle() {
      Taro.navigateTo({
        url: `/pages/mytask/myHandle/isHandle`
      })
    },
    unHandle() {
      Taro.navigateTo({
        url: '/pages/mytask/myHandle/unHandle'
      })
    },
    allState() {
      Taro.navigateTo({
        url: '/pages/mytask/myHandle/myHandle'
      })
    },
    //九宫格跳转
    gridBtn(item) {
      if (item.id == 1) {
        Taro.navigateTo({
          url: '/pages/myForm/liyuanshenqing'
        })
        return
      }
      Taro.navigateTo({
        url: item.url + `?oid=${item.oid}`
      })
    },
    //校园资讯跳转
    clickMessage(item) {
      const content = encodeURIComponent(item.content)  //url需要编码
      Taro.navigateTo({
        url: `/pages/activity/more/more?title=${item.name}&content=${content}`
      })
    },
    // 点击更多
    clickMore() {
      Taro.navigateTo({
        url: `/pages/activity/more/more`
      })
    },
    //办理状态请求
    getHandle() {
      let that = this
      const userInfo = Taro.getStorageSync('userInfo')
      console.log("------------", userInfo)
      that.flora.dash.dataApi.search({
        vars: {            // 入校状态            
          fields: ['code', 'apply_admission_status', 'qualification_status',
            'tuition_status', 'loan_status', 'card_collection_status',
            'organization_transfer_status', 'party_information_status',
            'account_migration_status', 'college_shirt_collection_status',
            'key_status', 'key_id.js_status', 'signin_nucleic_id.id'],
          model: 'FreshStudent',
          condition: {
            logic_operator: '&',
            children: [
              {
                leaf: {
                  field: 'code',
                  comparator: '=',
                  value: userInfo.code, //
                }
              },
            ]
          },
          limit: 11,
          offset: 0
        },
        cacheMode: 'no-cache',
      }).then((r) => {
        // console.log("--------办理数据----", r.result.items[0].data)
        //使用数据源
        const str = r.result.items[0].data;
        var ybl = 0;
        var wbl = 0;
        if (str['apply_admission_status'] == 'enrolled') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.qualification_status == 'pass') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.tuition_status == 'paid') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.loan_status == 'pass') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.card_collection_status == 'received') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.organization_transfer_status == 'pass' || str.organization_transfer_status == 'none') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.party_information_status == 'true' || str.party_information_status == 'none') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.account_migration_status == 'true' || str.account_migration_status == 'none') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.college_shirt_collection_status == 'received') {
          ybl++;
        } else {
          wbl++;
        }
        if (str.key_status == 'received') {
          ybl++;
        } else {
          wbl++;
        }
        if (str['key_id.js_status'] == 'paid') {
          ybl++;
        } else {
          wbl++;
        }
        if (str['signin_nucleic_id.id'] > 0) {
          ybl++;
        } else {
          wbl++;
        }
        var zjd = parseInt(ybl / (ybl + wbl) * 100)
        //最终返回数据源
        const stre = { "ybl": ybl, "wbl": wbl, "zjd": zjd }
        console.log(stre)
        this.bandleData = stre
        return
        // msg=str[0]
      })



    },
    //校园资讯
    getSchool() {
      let that = this
      that.flora.dash.dataApi.search({
        vars: {
          fields: ['name', 'title_page_id.download_url', "sequence", 'content'],
          model: 'FreshBanner',
          condition: {
            logic_operator: '&',
            children: [
              {
                leaf: {
                  field: 'is_show',
                  comparator: '=',
                  value: "true", //
                }
              },
              {
                leaf: {
                  field: 'type',
                  comparator: '=',
                  value: "zixun", //
                }
              },
            ]
          },
        },
        cacheMode: 'no-cache',
      }).then((r) => {
        console.log("------校园资讯------", r)
        //使用数据源
        const str = [];
        (r?.result?.items || []).forEach((row) => {
          if (row?.data) {
            str.push(row?.data);
          }
        })
        //打印获取的最终数据源
        console.log(str)
        this.schoolData = str
      })
    },
    //查询最大数
    getzuidashu() {
      let that = this
      const userInfo = Taro.getStorageSync('userInfo')
      that.flora.dash.dataApi.search({
        vars: {
          // fields: ['id', 'code', 'name', 'major','department','researchDirection','status'],
          fields: ['code', 'zdtjs'],
          model: 'FreshStudent',
          condition: {
            logic_operator: '&',
            children: [
              {
                leaf: {
                  field: 'code',
                  comparator: '=',
                  value: userInfo.code,
                }
              }
            ]
          },
        },
        cacheMode: 'no-cache',
      }).then((r) => {
        console.log("------------", r)
        //使用数据源
        const str = r.result.items[0].data;
        //打印获取的数据源
        console.log(str, "------------------------------")
        this.zuidashu = str
        this.panduanzuidashu()
        //  msg=str[0]
      })

    },
    panduanzuidashu() {
      if (this.zuidashu['zdtjs'] == 8) {
        this.urls = true
      }
    }



  },
  created() {
    this.getzuidashu()
  }
}
</script>
<style lang="less" scoped>
  // .nut-row {
  //   overflow: hidden;
  //   &:not(:last-child) .nut-col {
  //     margin-bottom: 15px;
  //   }
  //   margin-bottom: 15px;
  // }
  // .flex-content {
  //   line-height: 40px;
  //   color: #fff;
  //   text-align: center;
  //   border-radius: 6px;
  //   background: #ff8881;
  //   &.flex-content-light {
  //     background: #ffc7c4;
  //   }
  //   &.flex-content-height {
  //     height: 50px;
  //   }
  // }
  
  </style>